<template>
  <div class="chat-home_screen">
    <history-tips />
    <div class="logo">
      <eva-logo :size="62" />
    </div>
    <p class="ai-title fs-16 fs-b">{{ homeScreenConfig.slogan }}</p>
    <div class="questions_list">
      <div
        class="question_item mb-8 hover-border"
        v-for="item in homeScreenConfig.questions"
        :key="item"
        @click="handleNewChat(item)"
      >
        <span class="question_text">{{ item }}</span>
        <svg-icon icon-class="arrow-long" class="fs-20 ml-a flex-shrink-0"></svg-icon>
      </div>
    </div>
    <div class="functions_list">
      <div v-for="item in homeScreenConfig.functions" :key="item.agent_id" class="function_item hover-border" @click="clickHandle(item)">
        <svg-icon v-if="isLocalConfig" :icon-class="item.icon" class="fs-24"></svg-icon>
        <img v-else :src="item.icon" width="24" />
        <span>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import EvaLogo from '@/components/eva-logo/index.vue'
import HistoryTips from './history/history-tips.vue'
// import ChatMessage from '@/mixins/chat-message.js'
// import createChatDoc from '@/utils/chat-document'
// import { useAppStore } from '@/stores/app'
// import {
//   fetchHomeScreenConfig,
//   type HOME_SCREEN_CONF,
//   type FUNCTION_TYPE,
//   type HOME_SCREEN_FUN_ITEM
// } from './home-screen-conf'
// import { getRootAppendTo } from '@/utils'
// import { useUserStore } from '@/stores/user'
// import { openToolsLink } from '@/utils/client-tools'
// import { report } from '@/directives/report'
import { getBackEndConfig } from '@/api/common'
// import { sendMessage } from '@/api/chat'
export default {
  name: 'HomeScreen',
  // mixins: [ChatMessage],
  inject: ['detectIsLogin', 'clickAgentItem', 'addNewMessage'],
  components: {
    EvaLogo,
    HistoryTips
    // HomeScreen
  },
  data () {
    return {
      homeScreenConfig: {
        type: 'local',
        slogan: '美好的一天开始啦',
        questions: ['未来15天深圳天气', 'Excel里如何将不同列里相同数据提取出来？'],
        functions: [
          { type: 'function', icon: 'menu-pdf-summarize', name: 'pdf-summrize', text: 'PDF总结' },
          { type: 'function', icon: 'menu-ai-ppt', name: 'aippt', text: 'AI生成PPT' },
          { type: 'function', icon: 'menu-draw', name: 'aidraw', text: 'AI绘画' },
          { type: 'function', icon: 'menu-ocr', name: 'tools-ocr', text: 'OCR识别' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['appInfo']),
    isLocalConfig () {
      return this.homeScreenConfig.type === 'local'
    }
  },
  created () {
    // this.$xzReg('inform_session_unlock', this.sessionUnlock)
    this.fetchHomeScreenConfig()
  },
  mounted () {
    this.$xz('HtmlClickReport', { ReportID: 7614 })
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  },
  methods: {
    clickHandle (item) {
      this.$xz('HtmlClickReport', { ReportID: 7626 })
      this.clickAgentItem(item, true)
    },
    async handleNewChat (v) {
      this.$xz('HtmlClickReport', { ReportID: 7625 })
      if (!this.detectIsLogin()) return
      this.addNewMessage(v)
    },
    async fetchHomeScreenConfig () {
      const { data } = await getBackEndConfig({
        app_id: this.appInfo.appID,
        version: this.appInfo.version,
        union_id: this.appInfo.channel,
        keyname: 'AItjpz'
      })
      if (!data?.params?.length || !data.params[0].length) return
      const config = data.params[0][0]
      if (!config) return
      const questions = config.questions || []
      if (questions.length > 3) {
        // 随机选择3个问题
        config.questions = questions.sort(() => Math.random() - 0.5).slice(0, 3)
      }
      const functions = config.functions || []
      this.$store.dispatch('chat/setChatStore', { recommendAgents: functions })
      if (functions.length > 3) {
        // 选择前4个智能体
        config.functions = functions.slice(0, 4)
      }
      this.homeScreenConfig = config
    }
  }
}
// const appendTo = getRootAppendTo()
// const app = useAppStore()
// const homeScreenConfig = ref<HOME_SCREEN_CONF>({} as HOME_SCREEN_CONF)
// const isLocalConfig = computed(() => homeScreenConfig.value.type === 'local')
// const user = useUserStore()

// const { handleWebPageSummarize, handlePdfSummrize } = createChatDoc()

// const handleNewChat = (v: string) => {
//   if (!user.detectIsLogin()) return
//   this.addNewMessage(v)
// }

// const funcMethos: Map<FUNCTION_TYPE, () => void> = new Map()
// funcMethos.set('aippt', () => app.setActiveTab('aippt'))
// funcMethos.set('pdf-summrize', () => handlePdfSummrize())
// funcMethos.set('tools-ocr', () => app.setTabMenu('tools', 'ocr'))
// funcMethos.set('tools-pdftransform', () => app.setTabMenu('tools', 'pdftransform'))
// funcMethos.set('webpage-summarize', () => handleWebPageSummarize())
// funcMethos.set('aidraw', () => {
//   report(802)
//   openToolsLink(import.meta.env.VITE_APP_ZIHU_DRAW_HOST)
// })

// onMounted(async () => {
//   homeScreenConfig.value = await fetchHomeScreenConfig()
// })
</script>

<style lang="scss" scoped>
.chat-home_screen {
  margin: 0 auto;
  max-width: 450px;
  position: relative;
}
.logo {
  padding: 68px 0 11px 0;
  display: flex;
  justify-content: center;
}
.ai-title {
  text-align: center;
}
.questions_list {
  margin-top: 30px;
}
.question_item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  font-size: 12px;
  border-radius: 8px;
  line-height: 1.66;
  &:hover {
    color: rgba(255,255,255,1);
    border: 1px solid #4E5FFF;
    padding: 7px 15px;
    font-weight: bold;
    background: rgba(255,255,255,0.2);
  }
  .question_text {
    flex: 1 1 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.list-mutiple {
  flex: 1 1 100%;
  display: flex;
  flex-direction: row;
}

.function_item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 10px;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  font-size: 12px;
  border-radius: 8px;
  line-height: 1.2;
  &:hover {
    color: rgba(255,255,255,1);
    background: rgba(255,255,255,0.2);
  }
  img, .svg-icon {
    border-radius: 4px;
  }
  // --color-primary: #{$color-primary};
  // --color-active: #f49f17;
}
.functions_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.logo-video {
  mix-blend-mode: screen;
}
</style>
